<template>
  <view class="analysisummary">
    <view class="taskRatebox">
      <view class="taskRatetitle">任务按时完成率</view>
      <view class="taskRateChart">
        <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
        <view class="lengers">
          <view class="lengers_item">
            <view class="l_icon"></view>
            <view class="l_text">未达标指标</view>
            <view class="l_rate">{{ obj.wdbrate + "%" }}</view>
          </view>
          <view class="lengers_item">
            <view class="l_icon"></view>
            <view class="l_text">已达指标 </view>
            <view class="l_rate">{{ obj.ydbrate + "%" }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="attendCoursesAll">
      <view class="taskRatetitle">
        <view class="taskTitle">各系部听课次数汇总</view>
        <view class="taskTitle" style="width: 40%">
          <!-- <view class="teacherUser" @tap="openSchoolsList">{{
            queryCou.orgName ? queryCou.orgName : "点击选择学校"
          }}</view> -->
        </view>
      </view>
      <view class="coursesAll">
        <view class="courses_item" v-for="(ele, index) in departList" :key="index">
          <view class="course_name">{{ ele.depart }}</view>
          <view class="course_counts">{{ ele.count }}</view>
        </view>
      </view>
    </view>
  </view>
  <view v-if="schoolsListShow">
    <fl-schoolsList
      @keepUser="keepUser"
      @close="schoolsListShow = false"
      :show="schoolsListShow"
    />
  </view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { listorgpage } from "@/api/http";
import {
  orgListenCourseSummary,
  listenCourseSummaryChart,
} from "@/api/courseEvaluateCont/received";

const chartData = ref({});
const obj = ref({});
const schoolsListShow = ref(false);
const departList = ref([]);
const query = ref({
  pageSize: 10,
  pageNum: 1,
});
const queryCou = ref({
  unitId: "",
  orgName: "",
});
const opts = ref({
  legend: {
    show: false, // 尝试添加这行来隐藏图例
  },
  color: ["#45b1fa", "#13d2da"],

  padding: [5, 5, 5, -180],
  enableScroll: false,

  extra: {
    pie: {
      activeOpacity: 0.5,
      activeRadius: 0,
      offsetAngle: 0,
      border: false,
      borderWidth: 0,
      borderColor: "#FFFFFF",
      labelWidth: 0, // 移除指示线
    },
  },
});
// onMounted(() => {

// });
onLoad(() => {
  getList();
});
async function getAllList() {
  // 如果是管理员

  const res = await orgListenCourseSummary(queryCou.value);
  if (res.data.length > 0) {
    res.data.forEach((v) => {
      v.depart = v.orgName.split("-")[1];
    });
    departList.value = res.data;
  } else {
    departList.value = [];
  }
}
function openSchoolsList() {
  schoolsListShow.value = true;
}
async function getList() {
  const res = await listenCourseSummaryChart(query.value);

  let ydb = res.data.data[0].已达标;
  let wdb = res.data.data[1].未达标;
  let sum = ydb + wdb;
  let ydbrate = sum>0? ((ydb / sum) * 100).toFixed(2):0;
  let wdbrate = sum>0 ? ((wdb / sum) * 100).toFixed(2):0;
  obj.value = {
    ydbrate,
    wdbrate,
  };
  let result = {
    series: [
      {
        data: [
          { name: "未达标指标", value: wdb, labelShow: false },
          { name: "已达指标", value: ydb, labelShow: false },
        ],
      },
    ],
  };
  chartData.value = JSON.parse(JSON.stringify(result));
  // if (true) {
  //   let par = {
  //     pageSize: 5,
  //     pageNum: 1,
  //     departTypes: ["1", "3"],
  //   };
  //   const res = await listorgpage(par);
  //   queryCou.value.unitId = res.rows[1].unitId;
  //   queryCou.value.orgName = res.rows[1].orgName;
  // }
  getAllList();
}
function keepUser(ele) {
  queryCou.value.unitId = ele[0].unitId;
  queryCou.value.orgName = ele[0].orgName;
  getAllList();
  schoolsListShow.value = false;
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.analysisummary {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: #ffffff;
  .teacherUser {
    display: flex;
    align-items: center;
    width: 100%;
    height: 70rpx;
    border-radius: 5rpx;
    color: #6a6a6a;
    font-size: 24rpx;
    border: 1px solid #e5e5e5;
    padding-left: 20rpx;
  }
  .taskRatetitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    color: #000000;
    font-weight: 700;
    padding: 20rpx 0 0 40rpx;
    margin-bottom: 30rpx;
  }
  .taskRatebox {
    width: 100%;
    // height: 415rpx;
    // background-color: red;
    margin-bottom: 16rpx;

    .taskRateChart {
      position: relative;
      width: 100%;
      height: 400rpx;
      // background-color: blue;
      .lengers {
        position: absolute;
        right: 70rpx;
        top: 50%;
        transform: translateY(-50%);
        .lengers_item {
          display: flex;
          align-items: center;
          color: #333333;
          font-size: 28rpx;
          margin-top: 45rpx;
          .l_icon {
            width: 30rpx;
            height: 15rpx;
            border-radius: 4rpx;
            background-color: #49affd;
          }
          .l_text {
            width: 160rpx;
          }
          .l_text {
            margin: 0 0rpx 0 10rpx;
          }
          &:nth-child(2) {
            .l_icon {
              background-color: #13d2da;
            }
          }
        }
      }
    }
  }
  .attendCoursesAll {
    width: 100%;
    height: 485rpx;
    // background-color: green;
    .coursesAll {
      display: flex;
      flex-wrap: wrap;
      .courses_item {
        width: 50%;
        height: 180rpx;
        // background-color: pink;
        border: 1rpx solid #eeeeee;
        text-align: center;
        .course_name {
          font-size: 28rpx;
          color: #666666;
          margin: 20rpx 0 20rpx;
        }
        .course_counts {
          color: #20a6fc;
          font-size: 60rpx;
        }
      }
    }
  }
}
</style>
